<template>
    <div class="table-wapper">
       <div class="btns">
           <div class="btn" :class="btnIndex === index && 'active'" v-for="(item, index) in btns">{{item}}</div>
       </div>

        <div class="table">
            <div class="row">
                <div class="th1">排名</div>
                <div class="th2">渠道</div>
                <div class="th3">占比</div>
                <div class="th4">周环比</div>
            </div>
            <div class="row" v-for="(item, index) in list">
                <div class="th1">{{index + 1}}</div>
                <div class="th2">{{item.name}}</div>
                <div class="th3">
                    <div class="number">{{item.percent}}%</div>
                    <div class="line" :style="{width: `${item.percent}%`}"></div>
                </div>
                <div class="th4">
                    <span :style="{color: item.type === 'up' ? '#509A80' : '#F06305'}">{{item.chainRatio}}%</span>
                    <el-icon v-if="item.type === 'up'" color="#509A80">
                        <CaretTop />
                    </el-icon>
                    <el-icon v-else color="#F06305">
                        <CaretBottom />
                    </el-icon>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import {ref} from "vue";
const btnIndex = ref(1)
const btns = ref(['筛选1', '筛选2', '筛选3'])
const list = ref([
    {
        name: '渠道A',
        percent: 35,  //百分比
        chainRatio: 10, //环比
        type: 'up' //环比上升 OR 下降
    },
    {name: '渠道B',percent: 25,chainRatio: 10,type: 'up'},
    {name: '渠道C',percent: 15,chainRatio: 10,type: 'down'},
    {name: '渠道D',percent: 25,chainRatio: 10,type: 'up'},
    {name: '渠道E',percent: 5,chainRatio: 10,type: 'down'},
])

</script>
<style scoped lang="scss">
.btns{
    display: flex;
    align-items: center;
    height: 1.875rem;
    .btn{
        height: 100%;
        width: 5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #DBDBDB;
        font-size: 0.75rem;
        color: #999999;
        font-weight: 400;
        &:first-child{
            border-radius: 10px 0px 0px 10px;
        }
        &:last-child{
            border-radius: 0px 10px 10px 0px;
        }
    }
    .active{
        color: #75A2F3;
        border-color: #75A2F3;
    }

}
.table{
    width: 23.75rem;
    border: 1px solid #DBDBDB;
    border-radius: 10px 10px 10px 10px;
    margin-top: 30px;
    .row{
        height: 1.875rem;
        display: flex;
        align-items: center;
        padding: 0 10px;
        color: #999999;
        font-size: 0.75rem;
        &:not(:last-child){
            border-bottom: 1px solid #DBDBDB;
        }

        .th1, .th2, .th3, .th4{
            display: flex;
            align-items: center;
        }
        .th3{
            .number{
                text-align: right;
                margin-right: .5rem;
                width: 1.875rem;
            }
            overflow: hidden;
            .line{
                background: #75A2F3;
                height: 0.625rem;
            }
        }
        .th1 {flex: 1;}
        .th2 {flex: 2;}
        .th3 {flex: 3;}
        .th4 {flex: 1;}
    }

}
</style>